import React, { Component } from 'react'
import axios from 'axios'

class Home extends Component {

    state = {
        list: [],
        i: 0
    }

    componentDidMount() {
        axios.get('/api/list').then((res) => {
            this.setState({
                list: res.data
            })
        })
    }

    clickBtn(index) {
        this.setState({
            i: index
        })
    }

    pushSpecial(index) {
        this.props.history6('/special')
    }

    render() {
        let { list, i } = this.state
        return (
            <div className='Home'>
                <div className='left'>
                    <ul>
                        {
                            list && list.length ? list.map((item, index) => {
                                return <li key={index} className={i===index ? 'active' : ''} onClick={
                                    this.clickBtn.bind(this,index)
                                }>{item.title}</li>
                            }) : ''
                        }
                    </ul>
                </div>
                <div className='right'>
                    {
                        list && list.length ? list[i].children.map((item, index) => {
                            return (
                                <div key={index} className='item' onClick={
                                    this.pushSpecial.bind(this,index)
                                }>
                                    <img src={item.img} alt='' />
                                    <span>{item.name}</span>
                                </div>
                            )
                        }) : ''
                    }
                </div>
            </div>
        )
    }
}

export default Home